<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!--表单：采集用户信息，并提交到服务器
		    input控件元素：采集用户信息的元素
			必须type类型属性  属性值  text      文本框
			                        password   密文 文本框
									submit     提交 form表单控制
		                            button     按钮 结合JS，value【html4】
									reset      重置 form表单控制
									color      颜色控件
									datetime-local本地日历控件
									date       年月日插件
									time       时间插件
									week       周插件
									range      滑块
									file       上传文件
									radio      单选框 结合name属性
									checkbox   复选框
									checked    默认选择【单复选框】
									image      图片按钮 结合src属性
									hidden     隐藏 结合 JS
		-->
		<h1>登陆页面</h1>
		<form>
			<h4>表单元素：控件元素</h4>
		账号：<input type="text" /> <br><br>
		密码：<input type="password" /><br><br>
		<input type="submit">
		<input type="button" value="自定义按钮" />
		<!--html5写法 结合JS-->
		<button>触发按钮</button>
		<input type="reset"><br>
		<input type="color" />
		<input type="datetime-local" />
		<input type="date" />
		<input type="time" />
		<input type="week" />
		<input type="range" />
		<input type="file" />
		男<input type="radio" name="sex"checked="checked"/>
		女<input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox"checked />佛跳墙
		<input type="checkbox" />小鸡炖蘑菇
		<input type="image" src="img/1.png"width="140px"height="140px/>
		<input type="hidden" />
		<h4>表单元素：多行文本元素 cols行属性 rows列属性</h4>
		建议：<textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据</h4>
		<!--层级元素 快捷键：select>option-->
		发车时间：<select>
			<option>00:00--24:00</option>
			<option>00:00--06:00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		</select>
		<h4>表单元素：细节元素</h4>
		<!--层级元素 快捷键：details>summary+div-->
		<details>
			<summary>征婚启事</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum placeat totam laudantium. Dolorem odio accusantium aut temporibus, alias iure eveniet! Repellendus autem unde eveniet non libero hic nihil. Incidunt, explicabo.</div>
		</details>
		</form>
		<h1>新元素</h1>
		<!--记号笔元素-->
		周五<mark>放假啦</mark>
		<!--度量元素 必须属性 value="0-1默认值" min属性 max属性-->
		电量：<meter value="50" min="0" max="100"></meter>
	</body>
</html>